<template>
<div style="padding: 20px;border: 5px solid #0753a2;height: 100vh;overflow: scroll;">
  <el-row :gutter="20">
    <el-col :span="2">
      <el-button @click="router.push('/')" :icon="ArrowLeftBold" size="large" type="primary">返回登录</el-button>
    </el-col>
  </el-row>

  <el-divider content-position="left"></el-divider>

  <el-card>
    <template #header>
      <div class="card-header">
        <el-icon><Promotion/></el-icon>
        <span> 搜索图书</span>
      </div>
    </template>
    <common-search v-model:form="SearchForm" v-model:type="SearchType"
                   :on-search="onSearch" :reset-search="resetSearch"/>
    <common-book :on-borrow="onBorrow" :on-return="onReturn" :table-type="tableType" :table-data="tableData"/>
    <common-pager v-model:total="currentTotal" v-model:page="currentPage" :handle-current-change="handleCurrentChange"/>
  </el-card>
</div>
</template>

<script setup lang="ts">
import {ArrowLeftBold, Search, Promotion} from '@element-plus/icons-vue'
import router from "@/router";
import {getCurrentInstance, onMounted, ref} from "vue";
import {FindBooknoParams} from "@/api/bookno";
import api from "@/api";
import {ElMessage, ElMessageBox, FormInstance} from "element-plus";
import CommonSearch from "@/components/common/CommonSearch.vue"
import CommonBook from "@/components/common/CommonBook.vue"
import CommonPager from "@/components/common/CommonPager.vue"

onMounted(() => {
  getTableData(1);
})

const {appContext} = getCurrentInstance()!
const tableData = ref([])
const currentPage = ref(1);
const currentTotal = ref(0);
const tableType = [
  {label: '书本条码', width: '', rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}], showType: '', prop: 'code'}
  , {label: '书本名称', width: '', rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}], showType: '', prop: 'name'}
  , {label: '借阅用户', width: '', rules: [{required: false, message: '请输入借阅用户', trigger: 'blur'}], showType: '', prop: 'userName'}
  , {label: '借阅时间', width: '', rules: [{required: false, message: '请输入借阅时间', trigger: 'blur'}], showType: '', prop: 'borrowDate'}
  , {label: '借阅状态', width: '', rules: [{required: false, message: '请输入借阅状态', trigger: 'blur'}], showType: 'borrow', prop: 'borrow'}
];

const SearchType = [
  {label: '书本条码', width: '', rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}], showType: '', prop: 'code'}
  , {label: '书本名称', width: '', rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}], showType: '', prop: 'name'}
  // , {label: '书本类别', width: '', rules: [{required: false, message: '请输入书本类别', trigger: 'blur'}], showType: 'sorts', prop: 'sortsId'}
];

const SearchForm = ref(<FindBooknoParams>{
  "code": "",
  "name": "",
});

function onSearch() {
  api.bookno.findBooknoUser(SearchForm.value).then((res: any) => {
    if (res.success) {
      tableData.value = res.data;
    }
    ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
  })
}

function resetSearch(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields();
  getTableData(1);
}

function getTableData(val: number) {
  api.bookno.listPageBookno(val, 15).then((res: any) => {
    if (res.success) {
      tableData.value = res.data.records;
      currentTotal.value = res.data.total;
    }
    ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
  })
}

function onBorrow(index, row) {
  ElMessageBox.confirm('请先登录?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type:'warning'
  }, appContext).then(() => {

  }).catch(() => {
    ElMessage.info({message: "请先登录", grouping: true, showClose: true});
  })
}

function onReturn(index, row) {
  ElMessageBox.confirm('请先登录！', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type:'warning'
  }, appContext).then(() => {

  }).catch(() => {
    ElMessage.info({message: "请先登录", grouping: true, showClose: true});
  })
}

const handleCurrentChange = (val: number) => {
  getTableData(val);
}

</script>

<style scoped>
svg {
  width: 18px;
  height: 18px;
}
</style>